<!-- 客户端资讯详情 -->
<template>
  <div id="articleDetail">
    <div class="title">{{ articleDetail.title }}</div>
    <div class="intro">
      <span>{{ articleDetail.time }}</span>
    </div>
    <div class="content" v-html="articleDetail.content"></div>
  </div>
</template>

<script>
import { getNewsDetail } from "../api/index";
import dayjs from "dayjs";
import { setTitle } from "../script/utils";

export default {
  data() {
    return {
      articleDetail: {
        title: "",
        time: "",
        content: "",
      },
    };
  },

  components: {},

  computed: {},

  mounted() {
    setTitle("资讯详情");
    this.getNewsDetail();
  },

  methods: {
    async getNewsDetail() {
      const { guid } = this.$route.params;
      await getNewsDetail({newsId: guid,}).then((back) => {
        if (back.status == 1) {
          let title = back.data.title;
          let publ_time_stamp = back.data.publDate;
          let content = back.data.content;
          this.articleDetail = {
            title,
            // time: dayjs(publ_time_stamp).format("YYYY-MM-DD HH:mm"),
            time: publ_time_stamp,
            // content,
            content:content.replace(/  /g,"</br>"),
          };
        }
      });
    },
  },
};
</script>
<style>
.content img {
  display: block;
  max-width: 90% !important;
}
</style>
<style lang="scss" scoped>
#articleDetail {
  margin: 0 auto;
  padding: 24px 28px;
  max-width: 1200px;
  img {
    max-width: 100%;
  }
  .title {
    color: #dddddd;
    font-size: 20px;
    font-weight: bold;
    line-height: 42px;
    text-align: center;
  }
  .intro {
    text-align: center;
    color: #cccccc;
    line-height: 42px;
    border-bottom: 1px solid #1c1d21;
    margin-bottom: 20px;
    font-size: 14px;
    span {
      margin-right: 5px;
    }
  }
  .content {
    color: #b2b6c7;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    word-break: break-all;
  }
}
</style>
